<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9-案例-图片导航</title>
		<style type="text/css">
			a{
				width:120px;
				height:58px;
				/* 文字垂直方向 */
				line-height:50px;
				/* 文字水平方向 */
				text-align:center;
				/*a变成行类块元素*/
				display:inline-block;
				color:#fff;
				text-decoration:none;
				background:#0000FF;
			}
			.baidu{
				background: url(images/bg1.png) no-repeat;
			}
			.sina{
				background: url(images/bg2.png) no-repeat;
			}
			.ali{
				background: url(images/bg3.png) no-repeat;
			}
			.doyin{
				background: url(images/bg4.png) no-repeat;
			}
			
			/* hover */
			.baidu:hover{
				background: url(images/bg5.png) no-repeat;
			}
			.sina:hover{
				background: url(images/bg6.png) no-repeat;
			}
			.ali:hover{
				background: url(images/bg7.png) no-repeat;
			}
			.doyin:hover{
				background: url(images/bg8.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<a href="" class="baidu">百度</a>
		<a href="" class="sina">新浪</a>
		<a href="" class="ali">阿里</a>
		<a href="" class="doyin">抖音</a>
		
	</body>
</html>
